<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1 {
				width: 200px;
				height: 100px;
				border: 1px solid saddlebrown;
			}
			
			#div2 {
				width: 100px;
				height: 100px;
				background: aqua;
			}
			.div1{
				font-size: 30px;
			}
		</style>
		<script src="../js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="div1">div1</div>
		<div id="div2">div2</div>
		<ul class="ul1">
			<li>No1</li>
			<li>No2</li>
			<li>No3</li>
			<li>No4</li>
			<li>No5</li>
		</ul>
		<script type="text/javascript">
			$(function() {
				//创建节点
				var $a = $("<a href='index.html'>首页</a>")
				//后面
				$("#div1").append($a)
				//前面
				$a.prependTo("#div1")
				//上面
				$("#div1").before($a)
				//下面
				$("#div1").after($a)
				//删除
				$a.remove()
				//清空div1的内容
				//$("#div1").remove()
				//替换
				//$a.replaceAll($("#div1"))
				//复制
				var a1=$a.clone();
				$("#div1").append(a1)
				//获取属性值
				$("#div1").attr("id")
				//设置属性
				$("#div1").attr("class","div1")
				$a.attr("href","/jQuery/chop2/chop1.html")
				//获取ul的子节点
				var len= $(".ul1").children()
				//下一个
				$("li:eq(2)").next().css("color","red")
				//下一个
				$("li:eq(2)").prev().css("color","red")
				//同辈元素
				$("li:eq(2)").siblings().css("color","red")
				//父级
				$("li:first").parent().css("color","red")
				//祖先
				$("li:first").parents().css("color","red")
				//遍历
				$("li").each(function(index){
					var t=$(this).text()
					//index下标从0开始;
					if(index==2){
						$(this).css("color","orange")
					}
				})
				//设置获取高
				$("#div1").height("200px")
				//设置值
				$("#div1").offset({
					top:2,
					left:3
				})
				//获取值
				$("#div1").offset().top
			})
		</script>
	</body>

</html>